<template>
  <div class='modulelist-container'>
    <!-- 添加/修改弹出框 -->
    <el-dialog :title="statuJudge==1?'子权限项添加':'子权限项编辑'"
               width="55%"
               :close-on-click-modal="false"
               :visible.sync="dialogFormAdd">
      <addAndModiMoudeList :todos="todos"
                           :catchBack="catchBack"
                           :catchSave="catchSave"></addAndModiMoudeList>
    </el-dialog>
    <el-form :inline="true"
             :model="form"
             class="demo-form-inline">
      <el-col :span="24"
              class="head-box">
        <el-col :span="5">
          <el-button type="primary"
                     class="el-icon-plus"
                     @click="onAdd">
            新增
          </el-button>
          <el-button type="primary"
                     class="el-icon-sort"
                     @click="onSort">排序</el-button>
        </el-col>
        <el-col :span="11">
          &nbsp;
        </el-col>
        <el-col :span="8">
          <el-col :span="19"
                  id="headInput">
            <el-input v-model="form.pro_name"
                      placeholder="菜单名称">
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="primary"
                       id="headSearch">查询</el-button>
            <!-- icon="el-icon-search" -->
          </el-col>

        </el-col>
      </el-col>
      <el-table :data='tableData'
                height="310"
                :header-cell-style="{background:'#f5f5f5'}"
                border
                id="midTableSize">

        <el-table-column prop='idno'
                         label='编号ID'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='modename'
                         label='操作控制器'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='modename'
                         label='操作方法'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='modename'
                         label='参数'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='modename'
                         label='操作名称'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='排序'
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">

            <!-- <el-form-item> -->
            <el-input v-model="form.pro_name1"></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
        <el-table-column prop='modename'
                         label='所属模块'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='menufo'
                         label='是否在菜单中显示'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='usefo'
                         label='是否可用'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
                         width="185px"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       @click="onEdit">编辑
            </el-button>
            <el-button size="mini"
                       type="text"
                       @click="onDelete(scope.row.admin_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change='handlePageChange'
                     :current-page='requestParam.page'
                     :page-size='requestParam.page_size'
                     layout='total,sizes,prev, pager, next, jumper'
                     :total='total_count'
                     align='center'>
      </el-pagination>
    </el-form>
  </div>
</template>
<script>
import AddAndModiMoudeList from './addAndModiMoudeList'
import { moduleListApi } from '@/services/SystemSetting';
export default {
  components: {
    AddAndModiMoudeList
  },
  data () {
    return {
      todos: '',
      statuJudge: '',
      dialogFormAdd: false,
      formAdd: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formIn: {
        pro_name: ''
      },
      form: {
        pro_name: '',
        pro_name1: ''
      },
      requestParam: {
        page: 1,
        page_size: 10
      },
      tableData: [
        {
          id: '1',
          idno: '266',
          modename: '岗位业务流',
          menufo: '显示',
          usefo: '可用'
        }

      ],
      total_page: 0,
      total_count: 0

    }
  },
  methods: {
    // 添加/修改弹框的返回事件
    catchBack (value) {
      this.dialogFormAdd = false
    },
    // 添加/修改弹框的保存事件
    catchSave (value) {
      this.dialogFormAdd = false
    },
    // 排序事件
    onSort () {
      this.$message('排序事件!')
    },
    // 编辑事件
    onEdit () {
      // 编辑时弹出框
      this.todos = '2'
      this.statuJudge = 2
      this.dialogFormAdd = true
      //this.$router.push('/modifyMoudeList');
    },
    // 新增
    onAdd () {
      this.todos = '1'
      this.statuJudge = 1
      this.dialogFormAdd = true
      //this.$router.push('/addMoudeList');
    },
    // 删除事件
    onDelete (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        })
      })
    },
    handlePageChange (page) {

    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
#midTableSize {
  margin-bottom: 20px;
}
#headSearch {
  width: 100% !important;
}
#headInput {
  padding-right: 12px;
}
.head-box {
  margin-bottom: 20px;
}
.modulelist-container {
  padding: 20px;
}
</style>
